<template>
<div>
    <el-container>
      <el-header>Header</el-header>
      <el-container class="main">
        <el-aside width="200px">Aside</el-aside>
        <el-main>
			Main
			<p></p>
		<div class="mb-4">
			<el-button>Default</el-button>
		</div>
<p></p>
		<div class="mb-4">
			<el-button plain="">Plain</el-button>
		</div>
			<p></p>
		<div class="mb-4">
			<el-button round="">Round</el-button>
		</div>
			<p></p>
		<div>
			<el-button :icon="Sugar" circle="" />
		</div>
		</el-main>
      </el-container>
      
      <el-footer>Footer</el-footer>
    </el-container>
</div>
</template>

<script setup>
	import {
	Sugar
	} from '@element-plus/icons-vue'
</script>

<style scoped>
.main{
    height: calc( 100vh - 120px );
}
.el-header,.el-footer{
    background-color: #ccc;
}
.el-main{
    background-color: khaki;
}
</style>